<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="字典名称">
        <el-input v-model="formData.dicname" placeholder="请输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%;">
          <el-option label="请选择状态" :value="0"></el-option>
          <el-option label="启用" :value="1"></el-option>
          <el-option label="未启用" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSearchChildDic">查询</el-button>
        <el-button icon="el-icon-delete" @click="clearSearch"></el-button>
      </el-form-item>
    </el-form>
    <el-row style="margin-bottom: 10px;">
      <el-button type="primary" @click="addChild">新增字典</el-button>
    </el-row>
    <el-table :data="tableData" v-loading="loading" border style="width: 100%">
      <el-table-column prop="dicname" label="名称" width="200">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="150">
      </el-table-column>
      <el-table-column label="操作" min-width="300">
        <template slot-scope="{row}">
          <el-button type="primary" @click="editChil(row.id)">编辑</el-button>
          <el-button type="delete" @click="toDeleteById(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align:center;margin-top: 20px;" @current-change="getChildDirctByName"
      @size-change="getChildDirctByName" :current-page.sync="pageInfo.pageNum" :page-sizes="[3, 5, 10, 20]"
      :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total"
      :pager-count="7">
    </el-pagination>

    <el-dialog title="新增字典" :visible.sync="formTable" :append-to-body="true">
      <AddDic :parentid="id" :childId="childId" v-if="formTable"></AddDic>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formTable = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddDic from './AddDic.vue'
export default {
  name: "DicSetting",
  // 父亲ID
  props: ['id'],
  components: {
    AddDic,
  },
  data() {
    return {
      formTable: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        total: 20,
      },
      tableData: [],
      formData: {
        dicname: '',
        status: 0,
      },
      loading: false,
      // 回显需要的id
      childId: '',
    }
  },
  mounted() {
    this.getChildDirctByName();
  },
  methods: {
    async getChildDirctByName() {
      this.loading = true;
      let { pageNum, pageSize } = this.pageInfo;
      let { dicname, status } = this.formData;
      let res = await this.$API.SystemMenus.reqChildDic(this.id, pageNum, pageSize, status, dicname);
      if (res.code == 200) {
        this.tableData = res.data.list;
        this.pageInfo.total = res.data.total;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message({ message: '没有数据', type: 'error' })
      }
      this.loading = false;
    },
    async getSearchChildDic() {
      this.pageInfo.pageNum = 1;
      await this.getChildDirctByName();
      if (this.tableData.length > 0) {
        this.$message({ message: '查询成功', type: 'success' })
      }
    },
    async clearSearch() {
      this.formData.dicname = "";
      this.formData.status = 0;
      this.pageInfo.pageNum = 1;
      this.getChildDirctByName();
    },
    addChild() {
      this.childId = '';
      this.formTable = true;
    },
    editChil(id) {
      this.childId = id;
      this.formTable = true;
    },
    async submitAddOrUpdate() {
      this.$bus.$emit('toAddChildDic');
      this.formTable = false;
      // 由于抛出事件是异步代码，因此下方的先进入了消息队列，需要让下方的代码也异步执行
      setTimeout(() => {
        this.getChildDirctByName();
      }, 100);
    },
    toDeleteById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.SystemMenus.reqDeleteChildDic2(id);
        if (res.code == 200) {
          this.getChildDirctByName();
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },
  }
}
</script>

<style scoped></style>